<template>
  <div class="step_box">
    <div class="flexbox flexcenter flexcolumn flexjust height_100">
       <img src="@/assets/img/complete.jpg" alt="" ref="completeimg">
        <p class="font_16 font_weight_500" style="margin:20px 0">已完成所有设置</p>
        <div>
            <el-button  plain @click="$emit('preview')">预览策略</el-button>
            <el-button type="primary" @click="$emit('complete')">保存设置</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import confetti from 'canvas-confetti'
export default {
    mounted() {
        if(JSON.parse(localStorage.getItem('complete')) == true)return
        this.confetti()
    },
    methods: {
        confetti(){
            localStorage.setItem('complete', true)
            this.$nextTick(() => {
                // 通过$refs访问DOM元素  
                const element = this.$refs.completeimg;  
            
                // 确保元素存在  
                if (element) {  
                    const rect = element.getBoundingClientRect();  
                    // 注意：这些值是相对于视口的，如果需要相对于整个页面的坐标，  
                    // 你可能需要加上滚动偏移量，如：window.scrollX 和 window.scrollY  
                    // console.log(`Page X: ${rect.left + window.scrollX}, Page Y: ${rect.top + window.scrollY}`);  
                    let left = rect.left + 50;
                    let top = rect.top + 50;
                    confetti({
                        particleCount: 600,
                        spread: 240,
                        origin: {
                            x: left / innerWidth,
                            y: top / innerHeight
                        }
                    });
                }  
            })
                
        }
    }
}
</script>

<style scoped>
/deep/ .el-button--primary{
    color: #fff !important;
}
/deep/ .el-button{
    width: 100px;
    border-radius: 8px;
    color: #165dff;
    border-color: #165dff;
}
.step_box{
    width: 100%;
    height: 100%;
}
</style>